import classNames from 'classnames'
import Count from '../Count'
import './index.scss'
import { useDispatch, useSelector } from "react-redux";
import { increCount, decCount, clearCart } from "../../store/modules/takeaway";
import { useState } from "react";


const Cart = () => {
  const {cartList} = useSelector(state => state.takeawayStore)
  const totalPrice = cartList.reduce((item_1, item_2) => item_1 + item_2.price * item_2.count, 0)
  let dispatch = useDispatch();

  // 控制购物车列表显示
  const [visible, setVisible] = useState(false)
  return (
    <div className="cartContainer">
      {/* 遮罩层 添加visible类名可以显示出来 */ }
      <div
        className={ classNames('cartOverlay', visible && 'visible') }
        onClick={() => setVisible(false)}
      />
      <div className="cart">
        {/* fill 添加fill类名可以切换购物车状态*/ }
        {/* 购物车数量 */ }
        <div onClick={() => setVisible(true)} className={ classNames('icon', cartList.length > 0 && 'fill') }>
          { cartList.length > 0 && <div className="cartCornerMark">{ cartList.length }</div> }
        </div>
        {/* 购物车价格 */ }
        <div className="main">
          <div className="price">
            <span className="payableAmount">
              <span className="payableAmountUnit">¥</span>
              { totalPrice }
            </span>
          </div>
          <span className="text">预估另需配送费 ¥5</span>
        </div>
        {/* 结算 or 起送 */ }
        { totalPrice > 20 ? (
          <div className="goToPreview">去结算</div>
        ) : (
          <div className="minFee">¥20起送</div>
        ) }
      </div>
      {/* 添加visible类名 div会显示出来 */ }
      <div className={ classNames('cartPanel', visible && 'visible') }>
        <div className="header">
          <span className="text">购物车</span>
          <span className="clearCart" onClick={() => dispatch(clearCart())}>
            清空购物车
          </span>
        </div>

        {/* 购物车列表 */ }
        <div className="scrollArea">
          { cartList.map(item => {
            return (
              <div className="cartItem" key={ item.id }>
                <img className="shopPic" src={ item.picture } alt=""/>
                <div className="main">
                  <div className="skuInfo">
                    <div className="name">{ item.name }</div>
                  </div>
                  <div className="payableAmount">
                    <span className="yuan">¥</span>
                    <span className="price">{ item.price }</span>
                  </div>
                </div>
                <div className="skuBtnWrapper btnGroup">
                  <Count
                    count={ item.count }
                    onPlus={ () => dispatch(increCount({id: item.id})) }
                    onMinus={ () => dispatch(decCount({id: item.id})) }
                  />
                </div>
              </div>
            )
          }) }
        </div>
      </div>
    </div>
  )
}

export default Cart
